<!DOCTYPE html>
<html>
<head>
	<title>分类</title>
		<#include "../../include/head-file.ftl">
	    <script src="${base}/static/plugins/clipboard/clipboard.js"></script>
</head>
<body>
	<div id="index" class="ms-index" v-cloak>
			<el-header class="ms-header" height="50px">
			<el-col :span="12">
				<@shiro.hasPermission name="cms:category:save">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="save()">新增</el-button>
				</@shiro.hasPermission>
				<@shiro.hasPermission name="cms:category:del">
				<el-button type="danger" icon="el-icon-delete" size="mini" @click="del(selectionList)"  :disabled="!selectionList.length">删除</el-button>
				</@shiro.hasPermission>
			</el-col>
			</el-header>
			<el-main class="ms-container">
			<div class="role-details inside-base">
				<div class="inside-base-main clearfix">
					<div class="inside-base-cont">
						<div class="role-cont clearfix">
							<div>
								<el-checkbox class="check-page-all" v-model="checkPageAll" @change="checkPageAllEv($event)"></el-checkbox>
								<el-table ref="multipleTable"
									  height="calc(100vh - 20px)"
									  border :data="dataList"
									  row-key="id"
									  v-loading="loading"
									  default-expand-all='true'
									  :tree-props="{children: 'children'}"
									  tooltip-effect="dark">
									<template slot="empty">
										{{emptyText}}
									</template>
									<el-table-column type="selection" width="40">
										<template slot-scope="scope">
											<el-checkbox v-model="scope.row.pageCheck" @change="pageCheckEv(scope)"></el-checkbox>
										</template>
									</el-table-column>
									<el-table-column label="编号" width="100" prop="id" show-overflow-tooltip>
										<template slot='header'>编号
											<el-popover placement="top-start" title="提示" trigger="hover" >
												标签：<a href="http://doc.mingsoft.net/mcms/biao-qian/lan-mu-lie-biao-ms-channel.html" target="_blank">${'$'}{field.id}</a>
												<i class="el-icon-question" slot="reference"></i>
											</el-popover>
										</template>
										<template slot-scope="scope">
											<span style="cursor: pointer" class="copyBtn" :data-clipboard-text="scope.row.id" @click="copyContent(true)">{{scope.row.id}}</span>
										</template>
									</el-table-column>
									<el-table-column label="标题" align="left" prop="categoryTitle">
									</el-table-column>
									<el-table-column label="类型" align="center" prop="categoryType" :formatter="categoryTypeFormat" width="70">
									</el-table-column>
									<el-table-column label="排序" align="center" prop="categorySort"  width="70">
									</el-table-column>
									<el-table-column label="链接地址" align="left" prop="categoryPath" min-width="200" show-overflow-tooltip>
										<template slot-scope="scope">
											<span v-if="scope.row.categoryType == '1' || scope.row.categoryType == '2'" style="cursor: pointer" class="copyBtn" :data-clipboard-text="'{ms:global.url/}'+scope.row.categoryPath+'/index.html'" @click="copyContent">{{"{ms:global.url/}"+scope.row.categoryPath+"/index.html"}}</span>
											<span v-if="scope.row.categoryType == '3'" style="cursor: pointer" class="copyBtn" :data-clipboard-text="scope.row.categoryDiyUrl" @click="copyContent">{{scope.row.categoryDiyUrl}}</span>
										</template>
									</el-table-column>
									<el-table-column label="列表地址" align="left" prop="categoryListUrl" width="100" show-overflow-tooltip>
									</el-table-column>
									<el-table-column label="内容地址" align="left" prop="categoryUrl" width="100" show-overflow-tooltip>
										<template slot-scope="scope">
											{{scope.row.categoryType == '1'?scope.row.categoryUrl:''}}
											{{scope.row.categoryType == '2'?scope.row.categoryUrl:''}}
										</template>
									</el-table-column>
									<el-table-column label="栏目属性" align="left" prop="categoryFlag" width="100" show-overflow-tooltip>
										<template slot-scope="scope">
											{{getDictLabel(scope.row.categoryFlag)}}
										</template>
									</el-table-column>
									<el-table-column label="操作" width="180" align="center">
										<template slot-scope="scope">
											<@shiro.hasPermission name="cms:category:save">
												<el-link type="primary" :underline="false" @click="save(scope.row.id, scope.row.id)"><i class="el-icon-plus"></i>子栏目</el-link>
											</@shiro.hasPermission>
											<@shiro.hasPermission name="cms:category:save">
												<el-link type="primary" :underline="false" @click="copyCategory(scope.row.id)">克隆</el-link>
											</@shiro.hasPermission>
											<#--						<@shiro.hasPermission name="cms:category:update">-->
											<#--							<el-link type="primary" :underline="false" v-if="scope.row.categoryType == '1' || scope.row.categoryType == '2'" @click="updateTemplate(scope.row.id)">应用子栏目</el-link>-->
											<#--						</@shiro.hasPermission>-->
											<@shiro.hasPermission name="cms:category:update">
												<el-link type="primary" :underline="false" @click="save(scope.row.id)">编辑</el-link>
											</@shiro.hasPermission>
											<@shiro.hasPermission name="cms:category:del">
												<el-link type="primary" :underline="false" @click="del([scope.row])">删除</el-link>
											</@shiro.hasPermission>
										</template>
									</el-table-column>
								</el-table>
								<!--  -->
							</div>
						</div>
					</div>
				</div>
			</div>
         </el-main>
	</div>
</body>

</html>
<script>
	"use strict";

	var indexVue = new Vue({
		el: '#index',
		data: {
			//分类列表
			dataList: [],
            dataListRows: [],
			//分类列表选中
			selectionList: [],
			//加载状态
			loading: true,
			//提示文字
			emptyText: '',
			categoryFlagOptions: [],
			manager: ms.manager,
			loadState: false,
			categoryTypeOptions: [{
				"value": "1",
				"label": "列表"
			}, {
				"value": "2",
				"label": "封面"
			},{
				"value": "3",
				"label": "链接"
			}],
			//搜索表单
			form: {
				// 栏目管理名称
				categoryTitle: '',
				// 所属栏目
				categoryId: '',
				// 栏目管理属性
				categoryType: '2',
				// 自定义顺序
				categorySort: 0,
				// 列表模板
				categoryListUrl: '',
				// 内容模板
				categoryUrl: '',
				// 栏目管理关键字
				categoryKeyword: '',
				// 栏目管理描述
				categoryDescrip: '',
				// 缩略图
				categoryImg: [],
				// 自定义链接
				categoryDiyUrl: '',
				// 栏目管理的内容模型id
				mdiyModelId: ''
			},
            msg: '',
            checkPageAll: false
		},
		methods: {
			//复制栏目
			copyCategory: function(id) {
				var that = this;
				ms.http.get(ms.manager + "/cms/category/copyCategory.do", {
					id: id
				}).then(function (res) {
					if (res.result) {
						that.$notify({
							title: '成功',
							message: '复制成功',
							type: 'success'
						});
						that.list();
					} else {
						that.$notify({
							title: '失败',
							message: res.msg,
							type: 'warning'
						});
					}
				});
			},
			//应用子栏目模板
			updateTemplate: function(id) {
				var that = this;
				ms.http.get(ms.manager + "/cms/category/updateTemplate.do", {
					id: id
				}).then(function (res) {
					if (res.result) {
						that.$notify({
							title: '成功',
							message: '应用成功',
							type: 'success'
						});
						that.list();
					} else {
						that.$notify({
							title: '失败',
							message: res.msg,
							type: 'warning'
						});
					}
				});
			},
			//根据字典数据值获取字典标签名
			getDictLabel: function (v) {
				var that = this;
				var labels = [];
				if(v){
					v.split(",").forEach(function (item) {
						for (var key in that.categoryFlagOptions) {
							if (item == that.categoryFlagOptions[key].dictValue) {
								labels.push(that.categoryFlagOptions[key].dictLabel);
								break;
							}
						}
					});
				}
				return labels.toString();
			},
			//查询列表
			list: function () {
				var that = this;
				this.loadState = false;
				this.loading = true;
				ms.http.get(ms.manager + "/cms/category/list.do", {
					pageSize: 999
				}).then(function (res) {
					if (that.loadState) {
						that.loading = false;
					} else {
						that.loadState = true;
					}

					if (!res.result || res.data.total <= 0) {
						that.emptyText = '暂无数据';
						that.dataList = [];
					} else {
						that.emptyText = '';
						var rows = res.data.rows.map(function (v) {
							return {
                                pageCheck: false,
							    ...v
							}
                        });
						that.dataList = rows && rows.length>0? ms.util.treeData(rows, 'id', 'categoryId', 'children'):[];
                        that.setRecursion('dataListRows', that.dataList);
					}
				});
				setTimeout(function () {
					if (that.loadState) {
						that.loading = false;
					} else {
						that.loadState = true;
					}
				}, 500);
			},
			copyContent: function (id) {
				var msg = "链接地址已保存到剪切板";
				if (id == true) {
					msg = "编号已保存到剪切板";
				}
				var clipboard = new ClipboardJS('.copyBtn');
				var self = this;
				clipboard.on('success', function (e) {
					self.$notify({
						title: '提示',
						message: msg,
						type: 'success'
					});
					clipboard.destroy();
				});
			},
			//删除
			del: function (row) {
				var that = this;
				that.$confirm('此操作将永久删除分类和分类下的文章, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function () {
					ms.http.post(ms.manager + "/cms/category/delete.do", row.length ? row : [row], {
						headers: {
							'Content-Type': 'application/json'
						}
					}).then(function (res) {
						if (res.result) {
							that.$notify({
								title: '成功 ',
								type: 'success',
								message: '删除成功!'
							}); //删除成功，刷新列表

							that.list();
						} else {
							that.$notify({
								title: '失败',
								message: res.msg,
								type: 'warning'
							});
						}
					});
				})
			},
			//获取categoryFlag数据源
			categoryFlagOptionsGet: function () {
				var that = this;
				ms.http.get(ms.base + '/mdiy/dict/list.do', {
					dictType: '栏目属性',
					pageSize: 99999
				}).then(function (res) {
					if(res.result){
						res = res.data;
						that.categoryFlagOptions = res.rows;
					}
				});
			},
			//表格数据转换
			categoryTypeFormat: function (row, column, cellValue, index) {
				var value = "";

				if (cellValue) {
					var data = this.categoryTypeOptions.find(function (value) {
						return value.value == cellValue;
					});

					if (data && data.label) {
						value = data.label;
					}
				}

				return value;
			},
			//新增
			save: function (id, childId) {
				if (id) {
					location.href = this.manager + "/cms/category/form.do?id=" + id + "&childId=" + childId;
				} else {
					location.href = this.manager + "/cms/category/form.do";
				}
			},
			//重置表单
			rest: function () {
				this.$refs.searchForm.resetFields();
			},
            // 查找父级函数
            getParent (data2, nodeId2) {
                var arrRes = [];
                if (data2.length === 0) {
                    if (nodeId2) {
                        arrRes.push(data2)
                    }
                    return arrRes
                }
                let rev = (data, nodeId) => {
                    for (var i = 0, length = data.length; i < length; i++) {
                        let node = data[i];
                        if (node.id === nodeId) {
                            arrRes.push(node);
                            rev(data2, node.parentids);
                            break
                        } else {
                            if (node.children) {
                                rev(node.children, nodeId)
                            }
                        }
                    }
                    return arrRes
                }
                arrRes = rev(data2, nodeId2);
                return arrRes
            },
            // 总选框事件
            checkPageAllEv (item) {
                let checkAll = (data, checked) => {
                    for (let x of data) {
                        x.pageCheck = checked;
                        if (x.children) {
                            checkAll(x.children, checked)
                        }
                    }
                };
                if (item === true) {
                    checkAll(this.dataList, true)
                } else {
                    checkAll(this.dataList, false)
                }
                this.selectionList = this.dataListRows.filter(item => item.pageCheck )
            },
            // 遍历json数据
            isCheckAllEv (data) {
                let isCheckAll = true;
                let fn = data => {
                    for (let x of data) {
                        if (x.pageCheck === false) {
                            isCheckAll = false;
                            return isCheckAll
                        }
                        if (x.children) {
                            fn(x.children)
                        }
                    }
                };
                fn(data);
                return isCheckAll
            },
            // 子选框事件
            pageCheckEv (scope) {
                // 如果有子项，则子项的选框选择跟当前一致
                if (scope.row.children) {
                    this.handleCheckAll(scope.row, scope.row.pageCheck)
                }
                // 查找父级选框
                this.getParent(this.dataList, scope.row.id).forEach((item, i) => {
                    if (!item.children) {
                        item.pageCheck = scope.row.pageCheck
                    } else {
                        var num = 0;
                        item.children.forEach((item, i) => {
                            if (item.pageCheck === true) {
                                num += 1
                            }
                        });
                        if (num === item.children.length) {
                            item.pageCheck = true
                        } else {
                            item.pageCheck = false
                        }
                    }
                });

                // 是否所有子项都已经勾选
                if (this.isCheckAllEv(this.dataList) === true) {
                    this.checkPageAll = true
                } else {
                    this.checkPageAll = false
                }

                this.selectionList = this.dataListRows.filter(item => item.pageCheck )
            },
            handleCheckAll (row, checked) {
                row.pageCheck = checked;
                if (row.children) {
                    let that = this;
                    row.children.forEach((element, i) => {
                        that.handleCheckAll(row.children[i], checked)
                    })
                }
            },
            //遍历树  获取数组
            setRecursion(newDatas,oldDatas) {
                for (let i in oldDatas) {
                    this[newDatas].push(oldDatas[i]);
                    if (oldDatas[i].children) {
                        this.setRecursion(newDatas, oldDatas[i].children);
                    }
                }
            },
		},
		created: function () {
			/* this.categoryListUrlOptionsGet();
             this.categoryUrlOptionsGet();*/
			this.categoryFlagOptionsGet();
			this.list();
		}
	});
</script>
<style>
	.inside-base {
		position: relative;
	}

	.inside-base-main {
		width: 100%;
		background: #ffffff;
		box-shadow: 0px 0px 10px 0px rgba(231,232,238,1);
		border-radius: 4px;
		margin-bottom: 30px;
	}

	// 中间内容
	   .inside-base-cont {
		   margin: 0 20px;
	   }

	.role-cont {
		position: relative;
		font-size: 16px;
		color: #333333;
		line-height: 40px;
	> span {
		width: 90px;
		height: 40px;
		text-align: right;
		float: left;
		margin-right: 10px;
		margin-bottom: 20px;
	}
	> div {
		position: relative;
		width: 90%;
		float: left;
		margin-bottom: 20px;
	>>> .el-input__inner {
		width: 320px;
	}
	}
	}
	.check-page-all {
		position: absolute;
		top: 13px;
		left: 11px;
		z-index: 99;
	}

	/* element-ui css */
	.inside-base {
	>>> .el-input__inner {
		font-size: 16px;
		color: #333333;
	}
	}
</style>
